<template>
    <div class="order-report">
        <div class="report-table-top-title" style="height: 50px">
            {{agentName}}
            <div style="float: right">
                <el-button type="primary" size="small" plain @click="getPage">刷新库存</el-button>
                <el-button type="danger" size="small" plain @click="toMain">返回</el-button>
            </div>
        </div>

        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 200px"
                >云管未注册点数：{{unregistedsoftwarecount}}点</div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 200px"
                >利云酒吧未注册点数：{{unregistedbarsoftwarecount}}点</div>
                <el-button type="primary" size="small" @click="showDialog2">手动添加商务订单</el-button>
                <el-button type="primary" size="small" @click="showReOrder" v-show="false">商家退库</el-button>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 700px"
                >云存储库存数：{{unregisteddatainventorycount}}个（1个库存单位为云端保存1年营业数据，有效期1年）</div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 700px"
                >利云酒吧储库存数：{{unregistedbardatainventorycount}}个（1个库存单位为云端保存1年营业数据，有效期1年）</div>
            </div>
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 200px"
                >EMT100T剩余库存：{{notactivektvnum}}台</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 200px"
                >EMT100Y剩余库存：{{notactivebarnum}}台</div>
                <el-button type="primary" size="small" @click="showDialog">添加设备</el-button>
                <span style="float: right">
                    <div class="report-table-form1-item word samll" style="width: 70px">主板SN码:</div>
                    <div class="report-table-form1-item" style="width: 180px">
                        <el-input v-model="searchNo" placeholder size="small"></el-input>
                    </div>
                    <el-button type="primary" size="small" @click="search">搜索</el-button>
                    <div class="report-table-form1-item" style="width: 100px"></div>
                </span>
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="marketterminallist"
                border
                style="width: 100%"
            >
                <el-table-column prop="chipID" label="主板SN码" width="200"></el-table-column>
                <el-table-column prop="terminalType" label="类型">
                    <template slot-scope="props">
                        <div v-show="props.row.terminalType===0">ktv</div>
                        <div v-show="props.row.terminalType===1">利云酒吧</div>
                    </template>
                </el-table-column>
                <el-table-column prop="deliveryTime" label="发货时间">
                    <template slot-scope="props">
                        <div>{{$F(props.row.deliveryTime)}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="chipCode" label="整机序列号"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="props">
                        <div v-show="props.row.status===1">未激活</div>
                        <div v-show="props.row.status===2">激活</div>
                        <div v-show="props.row.status===3">移除</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="report-table-block">
            <div class="report-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="20"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>

        <div class="page-padding"></div>

        <el-dialog title="变更软件套数" :visible.sync="dialogFormVisible2" width="600px">
            <el-form label-position="right">
                <el-form-item
                    label="输入数量"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="changeNum"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item label="输入订单号" :label-width="formLabelWidth" class="red-lable">
                    <!-- <el-form-item label="输入订单号" :label-width="formLabelWidth"> -->
                    <el-input
                        v-model="billNO"
                        autocomplete="off"
                        placeholder="销售平台订单号"
                        size="small"
                    ></el-input>
                    <!-- <el-input v-model="billNO" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="订单类型" :label-width="formLabelWidth">
                    <el-radio v-model="billType" :label="1">云管软件</el-radio>
                    <el-radio v-model="billType" :label="2">云管存储</el-radio>
                    <el-radio v-model="billType" :label="8">利云酒吧软件</el-radio>
                    <el-radio v-model="billType" :label="10">利云酒吧存储</el-radio>
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="info2" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDevice" size="small">变 更</el-button>
                <!-- <el-button type="primary" @click="removeDevice" size="small">减 少</el-button> -->
            </div>
        </el-dialog>

        <el-dialog title="添加设备" :visible.sync="dialogFormVisible" width="600px">
            <el-form label-position="right">
                <el-form-item label="主板SN码" :label-width="formLabelWidth">
                    <el-input v-model="chipID" autocomplete="off" placeholder size="small"></el-input>
                </el-form-item>
                <el-form-item label="整机序列号" :label-width="formLabelWidth">
                    <el-input v-model="chipCode" autocomplete="off" placeholder size="small"></el-input>
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="info" size="small"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-radio v-model="terminalType" :label="0">100T</el-radio>
                    <el-radio v-model="terminalType" :label="1">100Y</el-radio>
                </el-form-item>
                <div class="tipPic2"></div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="商家退库" :visible.sync="reOrderShow" width="400px">
            <el-form label-position="right">
                <el-form-item label="商家编号" :label-width="formLabelWidth">
                    <el-input v-model="companyCode" autocomplete="off" placeholder size="small"></el-input>
                </el-form-item>
                <el-form-item label="商家联系电话" :label-width="formLabelWidth">
                    <el-input v-model="telPhone" autocomplete="off" placeholder size="small"></el-input>
                </el-form-item>
                <div class="div-lable"></div>
                <el-form-item label="包厢退库点数" :label-width="formLabelWidth">
                    <el-input v-model="softKey" autocomplete="off" placeholder size="small"></el-input>
                </el-form-item>
                <el-form-item label="存储空间退库点数" :label-width="formLabelWidth">
                    <el-input v-model="dataKey" autocomplete="off" placeholder size="small"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="explain" size="small"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-radio v-model="type" :label="1">小K</el-radio>
                    <el-radio v-model="type" :label="2">利云酒吧</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelReOrder" size="small">取 消</el-button>
                <el-button type="primary" @click="okReOrder" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            terminalType: 0, // 设备类型 0KTV 1酒吧

            totalNum: 0,
            position: 1, // 页码

            notactivebarnum: 0, // EMT100Y剩余库存
            notactivektvnum: 0, // EMT100T剩余库存
            unregistedbardatainventorycount: 0, // 酒吧云存储库存数
            unregistedbarsoftwarecount: 0, // 酒吧未注册软件点数

            unregistedsoftwarecount: 0,
            notactiveterminalnum: 0,
            unregisteddatainventorycount: 0,
            marketterminallist: [],

            billNO: '', // 订单号
            changeNum: '',
            formLabelWidth: '130px',
            info2: '',
            info: '',
            chipID: '',
            chipCode: '',
            dialogFormVisible: false,
            dialogFormVisible2: false,
            reOrderShow: false, // 商家退库控制按钮

            companyCode: '',
            dataKey: '',
            explain: '',
            softKey: '',
            telPhone: '',
            type: 1,

            billType: 1,

            searchNo: ''
        }
    },
    mounted () {
    },
    created () {
        this.getPage()
    },
    watch: {
        position () {
            this.getPage()
        }
    },
    components: {
    },
    props: {
        underLine: null
    },
    computed: {
        agentName () {
            return this.$store.state.page2StoreManageAgentName
        },
        agentId () {
            return this.$store.state.page2StoreManageAgentId
        }
    },
    methods: {
        showMessage (message) {
            this.$message({
                showClose: true,
                message: message,
                type: 'warning'
            })
        },

        // 对应软件套数增减
        addDevice () {
            let message = ''
            if (this.changeNum === '') {
                message = '请选输入数量'
            }
            if (this.isNumChar2(this.changeNum)) {
                message = '数量必须为数字值'
            }
            if (this.info2 === '') {
                message = '请输入说明'
            }
            if (this.billNO === '') {
                message = '请输入订单号'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.dialogFormVisible2 = false
            this.$http.post(this.$store.state.IP + '/system/stock/increaseSoftwareInventory', {
                data: {
                    agentId: this.agentId,
                    billNO: this.billNO,
                    num: this.changeNum,
                    billType: this.billType,
                    explain: this.info2
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('增加套数成功')
                    console.log(response.data)
                    this.changeNum = ''
                    this.billNO = ''
                    this.info2 = ''
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('增加套数失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        removeDevice () {
            let message = ''
            if (this.changeNum === '') {
                message = '请选输入数量'
            }
            if (this.info2 === '') {
                message = '请输入说明'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.$http.post(this.$store.state.IP + '/system/stock/reduceSoftwareInventory', {
                data: {
                    agentId: this.agentId,
                    billNO: this.billNO,
                    num: this.changeNum,
                    billType: this.billType,
                    explain: this.info2
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('减少套数成功')
                    console.log(response.data)
                    this.dialogFormVisible2 = false
                    this.changeNum = ''
                    this.billNO = ''
                    this.info2 = ''
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('减少套数失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        showDialog2 () {
            this.dialogFormVisible2 = true
        },
        showReOrder () {
            this.reOrderShow = true
        },
        cancelReOrder () {
            this.companyCode = ''
            this.dataKey = ''
            this.explain = ''
            this.softKey = ''
            this.telPhone = ''
            this.type = 0
            this.reOrderShow = false
        },
        okReOrder () {
            let message = ''
            if (this.explain === '') {
                message = '请输入备注'
            }
            if (this.dataKey === '') {
                message = '请输入存储空间退库点数'
            }
            if (this.softKey === '') {
                message = '请输入包厢退库点数'
            }
            if (this.telPhone === '') {
                message = '请输入商家联系电话'
            }
            if (this.companyCode === '') {
                message = '请输入商家编号'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.reOrderShow = false
            this.$http.post(this.$store.state.IP + '/system/stock/reOrderSoftwareInventory', {
                companyCode: this.companyCode,
                dataKey: this.dataKey,
                explain: this.explain,
                softKey: this.softKey,
                telPhone: this.telPhone,
                type: this.type
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('添加设备成功')
                    console.log(response.data)
                    this.companyCode = ''
                    this.dataKey = ''
                    this.explain = ''
                    this.softKey = ''
                    this.telPhone = ''
                    this.type = 0
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('添加设备失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        // 对应设备添加
        cancelDialog () {
            this.chipID = ''
            this.chipCode = ''
            this.info = ''
            this.dialogFormVisible = false
        },
        okDialog () {
            let message = ''
            if (this.info === '') {
                message = '请输入说明'
            }
            if (this.chipID === '') {
                message = '请输入主板SN码'
            }
            if (this.chipCode === '') {
                message = '请输入整机序列号'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.dialogFormVisible = false
            this.$http.post(this.$store.state.IP + '/system/stock/addTerminalForAdmin', {
                data: {
                    agentId: this.agentId,
                    chipId: this.chipID,
                    chipCode: this.chipCode,
                    explain: this.info,
                    terminalType: this.terminalType
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('添加设备成功')
                    console.log(response.data)
                    this.chipID = ''
                    this.chipCode = ''
                    this.info = ''
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('添加设备失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        showDialog () {
            this.dialogFormVisible = true
        },

        toMain () {
            this.$store.dispatch('setSM', 0)
        },

        search () {
            this.position = 1
            this.getPage()
        },

        getList () {
            this.$http.post(this.$store.state.IP + '/system/stock/searchTerminalForAdmin', {
                data: {
                    page: this.position - 1, // 页数
                    limit: 20, // 一页显示数量
                    agentId: this.agentId,
                    chipId: this.searchNo
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('搜索序列号成功')
                    console.log(response.data)
                    this.marketterminallist = response.data.list
                    this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    console.log('搜索序列号失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        getPage () {
            this.$http.post(this.$store.state.IP + '/system/stock/getStockByAgentForAdmin', {
                data: {
                    agentId: this.agentId
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('获取库存详情成功')
                    console.log(response.data)
                    this.unregistedsoftwarecount = response.data.unregistedsoftwarecount
                    this.notactiveterminalnum = response.data.notactiveterminalnum

                    this.unregisteddatainventorycount = response.data.unregisteddatainventorycount
                    this.notactivebarnum = response.data.notactivebarnum
                    this.notactivektvnum = response.data.notactivektvnum
                    this.unregistedbardatainventorycount = response.data.unregistedbardatainventorycount
                    this.unregistedbarsoftwarecount = response.data.unregistedbarsoftwarecount
                    this.getList()
                }
                if (response.ret !== '0') {
                    console.log('获取库存详情失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.tipPic2
    width 100%
    height 200px
    background: url('../../../../common/pic/addDevicePic.png')
    background-repeat: no-repeat
    background-size: cover
.div-lable
    height 1px
    width 100%
    background #c0c4cc
    margin-bottom 20px
.red-lable
    .el-form-item__label
        color: red

.el-transfer-panel
    width: 400px

.has-gutter
    .el-checkbox
        display: none

.order-report
    width: 100%
    background: #f1f0f5

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
